<template>
  <!-- :before-close="handleClose" -->
  <el-drawer v-model="drawerVisible" :direction="direction" size="50%">
    <template #header>
      <h4>{{ drawerTitle }}</h4>
    </template>
    <template #default>
      <div>
        <el-table
          stripe
          border
          :data="sortTagList"
          :size="$store.getters.size"
          style="width: 100%; height: 88vh"
        >
          <!-- 序号 -->
          <el-table-column align="center" type="index" width="50" />
          <el-table-column
            header-align="center"
            :width="item.width"
            :align="item.align"
            :prop="item.prop"
            :label="$t(`table.${item.label}`)"
            v-for="(item, index) in sortTags"
            :key="index"
          >
            <!-- 是否关联 -->
            <template
              v-slot="{ row }"
              align="center"
              v-if="item.prop === 'is_relevance'"
            >
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="row.is_relevance"
                :size="$store.getters.size"
                disabled
              />
            </template>
            <!-- 操作 -->
            <!-- <template v-slot="{ row, index }" v-else-if="item.prop === 'action'"> -->
            <template #default="scope" v-else-if="item.prop === 'action'">
              <el-button
                v-if="!scope.row.is_relevance"
                type="success"
                :icon="Connection"
                :size="$store.getters.size"
                @click="addAssociatedData(scope.row, scope.$index)"
                >{{ $t('btn.association') }}</el-button
              >
              <el-button
                v-else
                type="danger"
                :icon="Delete"
                :size="$store.getters.size"
                @click="delAssociatedData(scope.row, scope.$index)"
                >{{ $t('btn.delete') }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { Connection, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { sortTags } from './sort_tag.js'
import { getSortTagList, addSortTag, deletesortTag } from '@/api/sort.js'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 父组件传参
const props = defineProps({
  drawerTitle: {
    type: String,
    default: '',
    required: true
  },
  sortId: {
    type: Number,
    default: null,
    required: true
  }
})

// 是否显示抽屉
const drawerVisible = ref(false)
// Drawer 打开的方向
const direction = ref('rtl')
const sortTagList = ref([])

// 加载关联数据
const initSortTagList = async () => {
  const res = await getSortTagList(props.sortId)
  sortTagList.value = JSON.parse(JSON.stringify(res.data))
}
initSortTagList()

// 关闭前提示
// const handleClose = (done) => {
//   ElMessageBox.confirm(i18n.t('dialog.closeDrawer'), {
//     confirmButtonText: i18n.t('dialog.OK'), // OK
//     cancelButtonText: i18n.t('dialog.Cancel'), // Cancel
//     type: 'warning'
//   })
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//       console.log('取消关闭')
//     })
// }

// 新增关联
const addAssociatedData = async (row, index) => {
  let sortTag = {
    sort_id: props.sortId,
    tag_id: row.id,
    create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    is_delete: 0
  }
  const res = await addSortTag([sortTag])
  ElMessage({
    type: res.status === 0 ? 'success' : 'error',
    message:
      res.status === 0
        ? i18n.t('message.associationSuccess')
        : i18n.t('message.associationFailed')
  })
  res.status === 0 && (sortTagList.value[index].is_relevance = 1)
}

// 删除关联
const delAssociatedData = async (row, index) => {
  const res = await deletesortTag(row.sort_id, row.tag_id)
  ElMessage({
    type: res.status === 0 ? 'success' : 'error',
    message:
      res.status === 0
        ? i18n.t('message.deleteSuccess')
        : i18n.t('message.deleteFailed')
  })
  res.status === 0 && (sortTagList.value[index].is_relevance = 0)
}
</script>

<style lang="scss" scoped></style>
